<template>
    <div class="topFooter">
        <div><img :src="bookList.pic_small" alt=""></div>
        <div>
            <p>{{bookList.title}}</p>
            <p>{{bookList.author}}</p>
        </div>
        <div>
            <van-icon name="pause-circle-o" v-if="flag" />
            <van-icon name="play-circle-o" v-else />
            <van-icon name="bars" />
        </div>
        <div clear="both"></div>
    </div>
</template>

<script>

    import {getSongDetail} from "../api/InterFacelibrary";

    export default {
        name: "FooterMusic.vue",
        data() {
            return {
                bookList: [],
                book: [],
                flag:true,
            }
        },
        created() {
            getSongDetail(675012544).then(res => {
                console.log(res)
                this.bookList = res.songinfo
                this.book = res.bitrate

            });
        }
    }
</script>

<style scoped lang="less">
    * {
        padding: 0px;
        margin: 0px;
    }
.topFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    /*overflow: hidden;*/
    background-color: #eaeaea;
    padding: 0px 10px;
    img {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 12s linear infinite;
        /*animation-play-state:paused;*/
        animation-play-state:running;
    }
    @-webkit-keyframes spin {
        to {
            transform: rotate(1turn);
        }
    }
    div:nth-child(2) {
        width: calc(100% - 150px);
        margin-left: 5px;
    }
    p {
        font-size: 14px;
    }
    div:nth-child(3){
        width: 70px;
        height: 60px;
        font-size: 30px;
       display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>